<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LGL服务后台登录</title>
    <link rel='stylesheet' href='staticFile/css/login/camera.css' type='text/css'>
    <link rel='stylesheet' href='staticFile/css/login/matrix-login.css' type='text/css'>
    <style type="text/css">
        html,body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        input {
            outline: none;
            border: none;
        }
        .login-main{width:100%;text-align: center;margin: 0 auto;position: absolute;}
        a {color: #09f;}
        a:hover {text-decoration: none;}
        /*.hideNav,.camera_thumbs_cont:去掉下面的小图片列表的灰色背景色*/
        .hideNav,.camera_thumbs_cont{background: unset;}
        #back_to_camera {
            background: rgba(255,255,255,.9);
            clear: both;
            display: block;
            height: 40px;
            line-height: 40px;
            padding: 20px;
            position: relative;
            z-index: 1;
        }
        .fluid_container {
            bottom: 0;
            height: 100%;
            left: 0;
            position: fixed;
            right: 0;
            top: 0;
            z-index: 0;
        }
        #camera_wrap_4 {
            bottom: 0;
            height: 100%;
            left: 0;
            margin-bottom: 0!important;
            position: fixed;
            right: 0;
            top: 0;
        }
        .camera_bar {z-index: 2;}
        .camera_thumbs {
            margin-top: -100px;
            position: relative;
            z-index: 1;
        }
        .camera_thumbs_cont {
            border-radius: 0;
            -moz-border-radius: 0;
            -webkit-border-radius: 0;
        }
        .camera_overlayer {opacity: .1;}
        .pull-right{
            float: right;
        }
        .btn {
            display: inline-block;
            padding: 4px 12px;
            margin-bottom: 0;
            font-size: 14px;
            line-height: 20px;
            color: #333;
            text-align: center;
            text-shadow: 0 1px 1px rgba(255,255,255,0.75);
            vertical-align: middle;
            cursor: pointer;
            background-color: #f5f5f5;
            background-repeat: repeat-x;
            border: 0;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
            filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
            -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.05);
            -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.05);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.05);
        }
        .btn-login{color: #fff;margin-right: 14px;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
        background-color: #49afcd;
        background-repeat: repeat-x;
        border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
        }
        .btn-login:hover{background-color: #2f96b4;}
        .btn-reset:hover{background-color: #51a351;}
        .btn-reset{background-color: #5bb75b;color: #fff;margin-right:10px;}
        .form-actions{margin-top: 20px;padding-top: 10px;}
        .company{position: fixed;
            bottom: 6px;
            right: 2px;}
        .check-img{float: left;margin-left: 5px;}
        .check-img img{width: 26px;height: 26px;margin-top: 1px;}
        .remember-pwd{float:right;padding-right:10%;}
        .remember-pwd-text{float: left;margin-top:3px;margin-right:2px;}
        .code-div{float: left;}
        .code-div input{height:22px; padding:2px 6px;margin-top: 1px;}
        #codeImg{height:26px;margin-top:1px;}
    </style>
    <script type='text/javascript' src='staticFile/js/plugins/jquery/jquery-1.7.2.js'></script>
    <script type='text/javascript' src='staticFile/js/login/jquery.mobile.customized.min.js'></script>
    <script type='text/javascript' src='staticFile/js/jquery.tips.js'></script>
    <script type='text/javascript' src='staticFile/js/login/jquery.easing.1.3.js'></script>
    <script type='text/javascript' src='staticFile/js/login/camera.min.js'></script>
    <script type='text/javascript' src='staticFile/js/jquery.cookie.js'></script>
    <script type="text/javascript" src="staticFile/js/plugins/encryption/scs_sha1.js"></script>
</head>
<body>
<div class="login-main">
    <div id="loginbox">
        <form action="" method="post" name="loginForm" id="loginForm">
            <div class="control-group normal_text">
                <h3>
                    <img src="staticFile/images/login/logo.png" alt="Logo" />
                </h3>
            </div>
            <div class="control-group">
                <div class="controls">
                    <div class="main_input_box">
                        <span class="add-on bg_lg">
                            <i><img height="37" src="staticFile/images/login/user.png" /></i>
                        </span>
                        <input type="text" name="loginname" id="loginname" placeholder="请输入用户名" />
                    </div>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <div class="main_input_box">
                        <span class="add-on bg_ly" style="height: 19px;">
                            <i><img height="37" src="staticFile/images/login/suo.png" /></i>
                        </span>
                        <input type="password" name="password" id="password" placeholder="请输入密码" />
                    </div>
                </div>

            </div>
            <div class="remember-pwd">
                <div class="remember-pwd-text">
                    <font color="white">记住密码</font>
                </div>
                <div style="float: left;">
                    <input id="rememberPwdCk" type="checkbox" onclick="rememberPwd();" style="padding-top:0px;" />
                </div>
            </div>
            <div class="form-actions">
                <div style="width:86%;padding-left:8%;">

                    <div class="check-img" style="">
                        <i><img src="staticFile/images/login/yan.png" /></i>
                    </div>
                    <div class="code-div">
                        <input type="text" name="code" id="code" size="8" />
                    </div>
                    <div style="float: left;">
                        <i><img id="codeImg" alt="点击更换" title="点击更换" /></i>
                    </div>

                    <span class="pull-right">
                        <a onclick="goLogin();" class="btn btn-login" id="goLogin">登录</a>
                    </span>
                    <span class="pull-right">
                        <a href="javascript:resetNameAndPwd();" class="btn btn-reset">重置</a>
                    </span>
                </div>
            </div>
        </form>
        <div class="controls company">
            <div class="main_input_box">
                <font color="white"><span>Copyright © 玖玖科技 2020</span></font>
            </div>
        </div>
    </div>
</div>
<div class="fluid_container">
    <div class="camera_wrap camera_emboss pattern_1" id="camera_wrap_4">
        <div data-thumb="staticFile/images/login/thumbs/bridge.jpg" data-src="staticFile/images/login/bridge.jpg"></div>
        <div data-thumb="staticFile/images/login/thumbs/leaf.jpg" data-src="staticFile/images/login/leaf.jpg"></div>
        <div data-thumb="staticFile/images/login/thumbs/road.jpg" data-src="staticFile/images/login/road.jpg"></div>
        <div data-thumb="staticFile/images/login/thumbs/sea.jpg" data-src="staticFile/images/login/sea.jpg"></div>
        <div data-thumb="staticFile/images/login/thumbs/shelter.jpg" data-src="staticFile/images/login/shelter.jpg"></div>
        <div data-thumb="staticFile/images/login/thumbs/tree.jpg" data-src="staticFile/images/login/tree.jpg"></div>
    </div>
</div>
<script type="text/javascript">
    //登录
    function goLogin(){
        if(!check()){
            return;
        }
        var loginName = $("#loginname").val(), password = $("#password").val(), code = $("#code").val();
        var shaObj = new jsSHA("SHA-1", "TEXT");
        shaObj.update(password);
        var hashPassword = shaObj.getHash("HEX");
        $.ajax({
            type: "POST",
            url: '/login/goLogin',
            data: {checkCode:code,loginName:loginName,password:hashPassword},
            dataType:'json',
            cache: false,
            success: function(data){
                var s = data.result;
                $('.jq_tips_info').hide();
                if(s == "0"){
                    saveCookie();
                    window.location.href = "/headerIndex.html";
                }else if(s == "1" || s == '4'){
                    setTips('code','验证码错误','#FF5080',15);
                    $("#code").focus();
                }else if(s == "2"){
                    setTips('loginname','未获取到用户名和密码','#FF5080',15);
                    $("#loginname").focus();
                }else if(s == "3"){
                    changeCode();
                    setTips('code','验证码失效','#FF5080',15);
                    $("#code").focus();
                }else if(s == "6"){
                    setTips('loginname','用户名或密码错误','#FF5080',15);
                    $("#loginname").focus();
                }else{
                    $("#loginbox").tips({
                        side : 1,
                        msg : '登录出错',
                        bg : '#FF5080',
                        time : 10
                    });
                }
            }
        });
    }

    $(document).ready(function() {
        changeCode();
        $("#codeImg").bind("click", changeCode);
    });

    $(document).keyup(function(event) {
        if (event.keyCode == 13) {
            $("#goLogin").trigger("click");
        }
    });

    //重新获取验证码
    function changeCode() {
        $("#codeImg").attr("src", "login/getCode?t=" + (new Date().getTime()));
    }
    //设置表单字段提示
    function setTips(id,msg,bg,t) {
        $("#" + id).tips({side : 2,msg : msg,bg : (bg == '' || bg == null) ? '#AE81FF' : bg,time : t == null ? 3 : t});
    }
    //登录前进行客户端校验
    function check() {
        var loginName = $("#loginname"),pwd = $("#password"), code = $("#code");
        if (loginName.val() == "") {
            setTips('loginname','用户名不得为空',null);
            loginName.focus();
            return false;
        }
        loginName.val(jQuery.trim(loginName.val()));
        if (pwd.val() == "" || pwd.val().length < 6) {
            setTips('password',pwd.val() == "" ? '密码不得为空' : '密码错误',null);
            pwd.focus();
            return false;
        }
        if (code.val() == "" || code.val().length != 4) {
            setTips('code',code.val() == "" ? '验证码不得为空' : '验证码不正确',null);
            code.focus();
            return false;
        }
        $("#loginbox").tips({
            side : 1,
            msg : '正在登录 , 请稍后 ...',
            bg : '#68B500',
            time : 10
        });
        return true;
    }

    /**
     * 记住密码
     */
    function rememberPwd() {
        if (!$("#rememberPwdCk").attr("checked")) {
            $.cookie('loginname', '', {
                expires : -1
            });
            $.cookie('password', '', {
                expires : -1
            });
            resetNameAndPwd();
        }
    }

    /**
     * 用户名、密码保存到cookie
     */
    function saveCookie() {
        if ($("#rememberPwdCk").attr("checked")) {
            $.cookie('loginname', $("#loginname").val(), {
                expires : 7
            });
            $.cookie('password', $("#password").val(), {
                expires : 7
            });
        }
    }
    //重置用户名和密码
    function resetNameAndPwd() {
        $("#loginname,#password").val('');
    }

    jQuery(function() {
        var loginname = $.cookie('loginname'), password = $.cookie('password');
        if (typeof(loginname) != "undefined"&& typeof(password) != "undefined") {
            $("#loginname").val(loginname);
            $("#password").val(password);
            $("#rememberPwdCk").attr("checked", true);
            $("#code").focus();
        }

        jQuery('#camera_wrap_4').camera({
            height: 'auto',
            loader: 'bar',
            pagination: false,
            thumbnails: true,
            hover: false,
            opacityOnGrid: false,
            imagePath: '../../../images/'
        });
    });
</script>
</body>
</html>